<template>
  <HHeader theme="white" :style="{ boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)' }">
    <Row>
      <Cell width="1">
        <Button icon="h-icon-menu" size="l" noBorder @click="siderChange"></Button>
      </Cell>
      <Cell width="13">
        <Select :datas="searchData" :filterable="true" @change="change" no-border align="left" placeholder="全局搜索" :deletable="false"></Select>
      </Cell>
      <Cell width="10" align="right">
        <Space :width="20" />
        <Icon type="h-icon-bell" @click="logOpend" isLink :size="15" />
        <Space :width="20" />
        <Icon v-if="wsStore.wsConnect" type="h-icon-loading" color="#409eff" :size="15" />
        <Icon v-if="!wsStore.wsConnect" type="h-icon-error" color="#cf5e4d" :size="15" />
        <Space :width="20" />
        <DropdownMenu @clickItem="trigger" :datas="param" class-name="h-text-dropdown" :width="150">
          <span>{{ loginName }}</span>
        </DropdownMenu>
      </Cell>
    </Row>
    <Modal v-model="opened" closeOnMask="false" hasDivider="true">
      <template #header><b>构建日志</b></template>
      <Table :datas="datas">
        <TableItem title="构建" prop="projectName" />
        <TableItem title="构建用户" prop="userName" />
        <TableItem title="构建时间" prop="buildTime" />
        <TableItem title="构建状态" prop="buildState" />
        <TableItem title="处理结果" prop="buildMsg" />
        <TableItem title="操作" :width="100" fixed="right">
          <template #default="{ data }">
            <button class="h-btn h-btn-s h-btn-red" @click="logDelete(data)">
              <i class="h-icon-trash" />
            </button>
          </template>
        </TableItem>
      </Table>
      <template #footer>
        <Button @click="getData">刷新</Button>
        <Button color="blue" @click="opened = false">关闭</Button>
      </template>
    </Modal>
  </HHeader>

</template>

<script>
import { confirm } from 'heyui';
import websocketStore from '@/store/websocket';

export default {
  name:"PaasHeader",
  computed: {
    siderCollapsed() {
      return this.$store.menus.siderCollapsed;
    },
    loginName() {
      return this.$store.loginInfo.loginName;
    },
    searchData() {
      return this.$store.menus.searchData;
    }
  },
  data() {
    return {
      wsStore: websocketStore(),
      datas: [],
      val: "",
      opened: false,
      param: [
        { label: "修改密码", value: "password", icon: "h-icon-user" },
        { divider: true },
        {
          label: "退出登录",
          value: "logout",
          icon: "h-icon-info",
        },
      ],
    };
  },
  methods: {
    logOpend() {
      this.opened = true;
      this.getData();
    },
    getData() {
      this.$post("/buildLog/page", {
        page: {
          current: 1,
          size: 50,
        },
      }).then(res => {
        if (res.data.code == this.$success) {
          if (!!res.data.data.rows) {
            this.datas = res.data.data.rows;
          } else {
            this.datas = [];
          }
        } else {
          this.datas = [];
        }
      });
    },
    logDelete(data) {
      this.$delete("/buildLog/" + data.id).then(res => {
        this.getData();
      });
    },
    trigger(code, data, event) {
      if (code == "password") {
        this.$router.push("/sysusers/passwd");
      } else if (code == "logout") {
        confirm({
          content: '确定注销登录？',
          onConfirm: () => {
            this.$store.setLoginFlag(false);
            this.$store.setMenuData([]);
            this.$delete("/logout");
            location.href = "/";
          }
        });
      } else if (code == "help") {
        window.open("操作手册.pdf");
      }
    },
    change(data) {
      if (!data) {
        return;
      }
      this.$store.setCurrent(data.value);
      this.$store.setTitle(data.label);
      this.$router.push(data.value);
    },
    siderChange() {
      this.$store.setSiderCollapsed();
    },
  },
};
</script>